<template>
    <div class="m-goods">
        <div class="goods-wrap quality">
            <div class="special-title">{{title}}</div>
            <div class="q-list">
                <ul>
                    <li v-for="(item,index) in store.tabs" :key="index" :class="{'active':tag === index}" @mouseenter="tab(index , item.tab)">
                        {{item.text}}
                    </li>
                </ul>
            </div>
        </div>
        <div class="good-area clearfix">
            <a href="/" v-for="(goods,index) in store.data" :key="index" class="card">
                <div class="card-img">
                    <img :src="goods.imgUrl | setUrl" />
                </div>
                <div class="name">{{goods.title}}</div>
                <div class="overview" v-if="!goods.tags">{{goods.subTitle}}</div>
                <div class="overview" v-else>
                    <span v-for="(item,index) in goods.tags" :key="index">{{item.tag}}</span>
                </div>
                <div class="pay-info">
                    <span class="price" v-if="goods.currentPrice">
                        ￥
                        <i class="money">{{goods.currentPrice}}</i>
                        <i v-if="goods.priceType">/{{goods.priceType}}</i>
                    </span>
                    <span class="store-price">{{goods.oldPrice}}</span>
                    <span class="address">{{goods.bottomInfo}}</span>
                </div>
            </a>   
        </div>
    </div>
</template>

<script>

export default{
    props:{
        title:{
            type: String,
            default: ''
        },
        background:{
            type: String,
            default: ''
        },
        store:{
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data(){
        return{
            value: 4.5,
            tag: 0
        }
    },
    methods:{
        tab(index , title){
            setTimeout(async() => {
                this.tag = index;
                let {status , data} = await this.$axios.get('http://127.0.0.1:8082/scenes/quality' , {
                    params:{
                        theme: 'quality',
                        tab: title,
                        limit: 12,
                        ci: 99
                    }
                })
                this.$emit('sendData' , data.store);
            },200)
        }
    },
    filters:{
        setUrl(url){
            return url.replace('w.h/' , '');
        }
    }
}
</script>